<template>
    <div class="tree_content">
        <!-- 查询区域 -->
        <el-input
            v-if="showSearch"
            placeholder="输入关键字进行过滤"
            v-model="filterText">
        </el-input>

        <!-- 树形展示区域 -->
        <el-tree
            ref="tree"
            :data="treeData"
            :props="treeProps"
            show-checkbox
            :filter-node-method="filterNode"
            @check-change="handleCheckChange">
        </el-tree>
    </div>
</template>

<script>
export default {
    props: {
        showCheck: { type: Boolean, default: true },                // 是否展示多选框
        showSearch: { type: Boolean, default: false },              // 是否展示查询框
        treeProps: { 
            type: Object, 
            default: () => { return {label: 'name', children: 'child'}}
        },                                                          // 展示字段与子集字段
        treeData: { type: Array, default: () => { return []}},      // 树形展示数据
    },

    data() {
        return {
            filterText: '',                                         // 查询内容
        }
    },

    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },

    methods: {
        // 本地查询过滤
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        // 选中数据
        handleCheckChange() {
            let tree = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
            console.log(tree)
            this.$emit('treeCheck', tree)
        }
    }
}
</script>

<style>

</style>